<template>
  <div style="overflow: hidden; width: 100%; height: 100%">
    <VxeBasicTable ref="tableRef" v-bind="gridOptions">
      <template #toolbar_buttons>
<!--        <Button type="primary" @click="handleCreate" style="margin-right: 10px"> 新增入库 </Button>-->
<!--        <Button @click="aoaToExcel"> 导出 </Button>-->
      </template>
      <template #action="{ row }">
<!--        <TableAction outside :actions="getActions(row)" />-->
      </template>

    </VxeBasicTable>

  </div>
</template>
<script lang="ts" setup>
  import { storageListApi,storageAllListApi } from '@/api/sys/wmStorage';


  import { aoaToSheetXlsx, ImpExcel } from '@/components/Excel';
  import {
    BasicTableProps,
    VxeBasicTable,
    VxeGridInstance,
    VxeGridListeners,
  } from '@/components/VxeTable';
  import {storageColumns, searchFormSchema} from './role.data';
  import {columns} from '../inStorage/role.data';

  import { useMessage } from '@/hooks/web/useMessage';
  import { Button } from 'ant-design-vue';



  import {reactive, ref} from "vue";
  defineOptions({ name: 'goodList' });
  const { createMessage } = useMessage();
  // const [register, { openModal, closeModal }] = useModal();
  const tableRef = ref<VxeGridInstance>();

  const gridOptions = reactive<BasicTableProps>({
    id: 'VxeTable',
    keepSource: true,
    editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
    showOverflow: true,
    size: 'mini',
    height: 'auto',
    columns: [...storageColumns],
    toolbarConfig: {
      slots: {
        buttons: 'toolbar_buttons',
      },
    },
    formConfig: {
      enabled: true,
      items: searchFormSchema,
    },
    pagerConfig: {
      pageSize: 20,
    },
    proxyConfig: {
      props: {
        result: 'data.list',
        list: 'data.list',
        total: 'data.totalResult',
        message: 'message',
      },
      ajax: {
        query: async ({ page, form, order }) => {
          return storageListApi({
            page: page.currentPage,
            pageSize: page.pageSize,
            ...form,
            order,
          });
        },
        // queryAll: async ({ form }) => {
        //   return await demoListApi(form);
        // },
      },
    },
  });

  function handleCreate() {
    // openModal(true, {
    //   isUpdate: false,
    // });
    openUserModal()
  }

  function openUserModal() {
    // userModal[1].openModal(true, {
    //   isUpdate: false
    //
    // });
  }

  function handleEdit(record: Recordable) {
    // openModal(true, {
    //   record,
    //   isUpdate: true,
    // });
  }

  function handleDelete(record: Recordable) {
    //console.log(record);

    // goodDeleteApi(record)
    //   .then((res) => {
    //     createMessage.success(res.message);
    //   })
    //   .catch((res) => {
    //     createMessage.error(res.message);
    //   })
    //   .finally(() => {
    //     reload();
    //   });
  }


  const loading=ref(false);

  function handleSuccess() {
    tableRef.value.commitProxy('reload');
  }

  function changeSubmitArr(results) {

    let list = [];
    // console.log("--results:",results)
    results.forEach((r) => {
      let json = {};
      for (let key in r) {
        columns.forEach((e) => {
          if (e.excel_title&&e.field == key) {
            let value=r[key];
            if(value){
              try{
                value=value+"".split(" ").join("");
              }catch (e){
                console.log(e)
              }
            }
            json[e.field] = value;
          }
        });
      }
      list.push(json);
    });
    return {list};
  }


  function aoaToExcel() {
    // 保证data顺序与header一致
    let arrHeader=[];
    columns.forEach(r=>{
      if(r.excel_title){
        arrHeader.push(r.excel_title);
      }
    })
    let arr= tableRef.value?.getTableData().tableData;
    let data=changeSubmitArr(arr);
    console.log("---data:",data)
    aoaToSheetXlsx({
      data:[data.list],
      header: arrHeader,
      filename: '库存盘点.xlsx',
    });

   // window.open('http://220.161.77.66:10111/app_file/excel/费用导入模版.xlsx');
  }
</script>
